<template>
  <div class="left">
    <div class="title" style="border-bottom: 1px solid lightgray;height: 35px">
      <el-row>
        <el-col :span="20">
          <div class="text" style="margin-left: 10px;margin-top: 5px">好友</div>
        </el-col>
        <el-col :span="4" class="add">
          <i
            class="el-icon-plus"

            style="margin-top: 8px;"
          ></i>
        </el-col>
      </el-row>
    </div>
    <div class="friendView"
         v-for="(f,index) in friendList"
         :index="index+''"
         :key="index"
         @click="changeFriend(index,f)" v-bind:class="{active: isColorIndex === index}">
      {{ f.friendRemark }}
    </div>
  </div>
</template>

<script>
import {listFriend} from "@/api/reporter/friend";
export default {
  name: "ShowFriend",
  data(){
    return{
      friendList:[],
      isColorIndex :-1,
      friend:{}
    }
  },
  created() {
    this.getFriendList()
  }
  ,methods:{
    /*查询好友列表*/
    getFriendList() {
      this.loading = true;
      listFriend(this.queryParams).then(response => {
        this.friendList = response.rows;

        console.log(response)
        console.log(this.friendList)
        this.total = response.total;
        this.loading = false;
      });
    },
    changeFriend(index,friend) {
      if (this.isColorIndex === index) {
        this.isColorIndex = -1;
      } else {
        this.isColorIndex = index;
        this.friend = friend;
      }
      // console.info(this.friend)
      console.log(this.friend)
      this.$EventBus.$emit('changeFriend',this.friend)
    },
  }
}
</script>

<style scoped>
.friendView{
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.active {
  background-color: #98999D
}
</style>
